<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="blog.css">
    <link rel="stylesheet" href="blog1.css" media="only screen and (max-width:1000px)">
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <div class="header-left">
            <span class="header-left-item1">BRUCE</span>
            <span class="header-left-item2">LEE</span>
        </div>
        <div class="header-right">
            <span class="header-right-item1">HOME</span>
            <span class="header-right-item2">ABOUT</span>
            <span class="header-right-item2">SERVICES</span>
            <span class="header-right-item2">BLOG</span>
            <span class="header-right-item2">CONTACT</span>
            <span class="header-right-item2">US</span>
        </div>
        <div class="hidden">
            <img class="hidden-img" src="晓.jpg" alt="">
        </div>
    </div>
    <!-- 第一部分 -->
    <div class="first">
        <div class="container">
            <div class="first-text">
                <div class="first-text-one">WE ARE</div>
                <div class="first-text-two">STARTING A NEW JOURNEY</div>
            </div>
        </div>
    </div>
    <!-- 第二部分 -->
    <div class="second">
        <div class="container">
            <div class="second-top">
                WHAT WE DO
            </div>
            <div class="second-center">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                <br> tempor incididunt ut labore et dolore magna aliqua.
            </div>
            <div class="second-bottom">
                <div class="col-xs-12 col-sm-6 col-md-3 second-bottom-one">
                    <div class="second-bottom-one-top">
                        Design and Developement
                    </div>
                    <div class="second-bottom-one-bottom">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                        <br> tempor incididunt ut labore et dolore magna aliqua.
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3  second-bottom-two">
                    <div class="second-bottom-two-top">
                        Design and Developement
                    </div>
                    <div class="second-bottom-two-bottom">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                        <br> tempor incididunt ut labore et dolore magna aliqua.
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3  second-bottom-three">
                    <div class="second-bottom-three-top">
                        Design and Developement
                    </div>
                    <div class="second-bottom-three-bottom">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                        <br> tempor incididunt ut labore et dolore magna aliqua.
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 second-bottom-four">
                    <div class="second-bottom-four-top">
                        Design and Developement
                    </div>
                    <div class="second-bottom-four-bottom">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                        <br> tempor incididunt ut labore et dolore magna aliqua.
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 第三部分 -->
    <div class="third">
        <div class="container">
            <div class="third-top">
                OUR RECENT WORKS
            </div>
            <div class="third-center">
                Borem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <br> ut labore et dolore magna aliqua.
            </div>
            <div class="third-bottom">
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <img class="a" src="blog01.jpg" alt="">
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <img class="a" src="blog01.jpg" alt="">
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <img class="a" src="blog01.jpg" alt="">
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <img class="a" src="blog01.jpg" alt="">
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <img class="a" src="blog01.jpg" alt="">
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <img class="a" src="blog01.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="four">
        <div class="container">
            <div class="four-top" class="col-xs-12">LATEST FROM OUR BLOG </div>
            <div class="four-mid" class="col-xs-12">
                <p>sadsadas</p>
                <p>djkahskjdhadkjhakda</p>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <div class="picture">
                        <img class="b" src="blog03.jpg" alt="">
                    </div>
                    <P>dkjasdkajdlakald</P>
                    <P>dkjasdkajdlakakdskdj ksjhfskhfsk fksjfskfjs kfshkfhsdkfhskfhld
                    </P>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <div class="picture">
                        <img class="b" src="blog03.jpg" alt="">
                    </div>
                    <P>dkjasdkajdlakald</P>
                    <P>dkjasdkajdlakakdskdj ksjhfskhfsk fksjfskfjs kfshkfhsdkfhskfhld
                    </P>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <div class="picture">
                        <img class="b" src="blog03.jpg" alt="">
                    </div>
                    <P>dkjasdkajdlakaldkjslkdjaldjasljkdsalkjdald</P>
                    <P>dkjasdkajdlakakdskdj ksjhfskhfsk fksjfskfjs kfshkfhsdkfhskfhld
                    </P>
                </div>
            </div>
        </div>
    </div>
    <!-- 第五部分 -->
    <div class="five">
        <div class="container">
            <div class="five-top">
                <p>DKJASDHAKJDHKAHDAKJDADDKJAS</p>
            </div>
            <div class="five-center">
                <p>kjdakdhask</p>
                <p>kjdakdhasksjdhajdhajdh</p>

            </div>
            <div class="five-bottom">
                <div class="row bottom-top">
                    <div class="col-xs-12 col-sm-6 col-md-6 bottom-zuobian">
                        <i class="fa fa-battery-empty" aria-hidden="true" style="font-size: 30px;"></i>
                        <div class="bottom-top-center">XXXXXX</div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-6 bottom-top-right">
                        <div class="col-xs-12 col-sm-6 col-md-6">
                            <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-6">
                            <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
                        </div>
                    </div>
                </div>

                <div class="row bottom-center">
                    <!-- <div class="col-xs-12 col-sm-6 col-md-6  bottom-zhongjian"> -->
                    <div class="col-xs-12 col-sm-6 col-md-6   bottom-center-left">
                        <i class="fa fa-battery-empty" aria-hidden="true" style="font-size: 30px;"></i>
                        <div class="bottom-top-center">XXXXXX</div>
                    </div>


                    <div class="col-xs-12 col-sm-6 col-md-6 bottom-center-right">
                        <input type="text" class="form-control" placeholder="Recipient's 111111" aria-describedby="basic-addon2">
                    </div>

                </div>
                <div class="row bottom-bottom">
                    <div class="col-xs-12 col-sm-6 col-md-6     bottom-bottom-left">
                        <i class="fa fa-battery-empty" aria-hidden="true" style="font-size: 30px;"></i>
                        <div class="bottom-top-center">XXXXXX</div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-6 bottom-bottom-right">
                        <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
                    </div>
                </div>

            </div>
        </div>
    </div>
</body>

</html>